<template>
    <div class="page" ref="page">
        <transition name="fade">
            <div class="search">
                <div class="search-goback" style="display: none">
                    <router-link to="/my" class="header-ctl-btnLeft">
                        <img src="../assets/strategy-goback.png">
                    </router-link>
                </div>
                <div class="search-left">
                    <div class="search-left-icon">
                        <i class="mintui mintui-search"></i>  <!--@blur.prevent="searchKey()"-->
                        <form action="javascript:return true">
                            <input type="search"  @keyup.13="searchKey()" @blur.prevent="searchKey()" v-model="keywords" placeholder="搜索目的地城市攻略"  id="serch">
                        </form>
                    </div>
                </div>
                <div class="search-right">
                    <router-link class="head" :to="{path:'/cityChoose',query:{strategy:1}}">
                        <!--<img @click="searchKey" src="../assets/index-search-btn2.png"  class="search-right-btn"/>-->
                        <div class="search-right-icon">
                            <div  class="search-right-icon-img" style="display: inline-block"><img src="../assets/strategy-city.png" alt=""></div>
                            <div class="search-right-icon-span" @click="">
                                <span class="">城市</span>
                                <img class="search-right-icon-span-cut" src="../assets/strategy-icon-arrows.png"/>
                            </div>
                        </div>
                    </router-link>
                </div>
            </div>
        </transition>
        <!--美国 and 加拿大 tab-->
        <div>
            <div class="tab-menu">
                <div    v-for="(item,index) in tabMenu"
                        class="tab-menu-item"
                        :class="{'active' : tabCurr==index}"
                        @click="tabFun(index,item.id)"
                >{{item.name}}
                </div>
            </div>
            <div v-if="tabCurr==0"  class="person_0">
                <div class="list">
                    <div class="share-div" :style="{'top':shareTop +'px'}" v-if="shareView" @click="shareFn" @touchmove.prevent>
                        <img class="share-div-img" src="../assets/buy-share-icon2.png"/>
                    </div>
                    <div class="list loadmore-wrapper"
                         ref="wrapper" :style="{ height: wrapperHeight + 'px' }"
                         v-infinite-scroll="getList" infinite-scroll-disabled="loading" infinite-scroll-distance="50"
                    >
                        <div class="list-item" v-for="(item,index) in listArr">
                            <div class="list-item-right">
                                <router-link :to="{path:'/articleold',query:{id:item.article_id}}">
                                    <img class="list-item-img" :src="item.img" alt="">
                                    <!--<img class="list-item-play-btn" src="../assets/play-btn.png" alt="" >-->
                                </router-link>
                            </div>
                            <div class="list-item-left">
                                <router-link :to="{path:'/articleold',query:{id:item.article_id}}">
                                    <h3 class="list-item-title">{{item.title}}</h3>
                                    <p class="list-item-date">{{item.create_time}}</p>
                                </router-link>
                                <div class="btns">
                                   <div class="btns-right">
                                       <span class="btns-item"><img class="btns-item-img" src="../assets/icon-hist.png" alt="">{{item.browse}}</span>
                                       <span class="btns-item" @click="like(index)"><img class="btns-item-img" src="../assets/icon-like.png" alt="">{{item.fabulous}}</span>
                                       <span class="btns-item"><img class="btns-item-img" src="../assets/icon-comment22.png" alt="">{{item.comment_num}}</span>
                                   </div>
                                </div>
                            </div>
                        </div>
                        <div v-show="loading && !loadEnd" class="loadmore-loading" style="display: none">
                            <mt-spinner type="fading-circle"
                                        style=" display: inline-block;vertical-align: middle;margin-right: 5px;"></mt-spinner>
                            加载中...
                        </div>
                        <div v-show="loadEnd" class="loadmore-loading" style="display: none">
                            <!--加载中...-->
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="tabCurr==1"   class="person_1">
                <div class="list">
                    <div class="share-div" :style="{'top':shareTop +'px'}" v-if="shareView" @click="shareFn" @touchmove.prevent>
                        <img class="share-div-img" src="../assets/buy-share-icon2.png"/>
                    </div>
                    <div class="list loadmore-wrapper"
                         ref="wrapper" :style="{ height: wrapperHeight + 'px' }"
                         v-infinite-scroll="getList" infinite-scroll-disabled="loading" infinite-scroll-distance="50"
                    >
                        <div class="list-item" v-for="(item,index) in listArr">
                            <div class="list-item-right">
                                <router-link :to="{path:'/articleold',query:{id:item.article_id}}">
                                    <img class="list-item-img" :src="item.img" alt="">
                                    <!--<img class="list-item-play-btn" src="../assets/play-btn.png" alt="" >-->
                                </router-link>
                            </div>
                            <div class="list-item-left">
                                <router-link :to="{path:'/articleold',query:{id:item.article_id}}">
                                    <h3 class="list-item-title">{{item.title}}</h3>
                                    <p class="list-item-date">{{item.create_time}}</p>
                                </router-link>
                                <div class="btns">
                                    <div class="btns-right">
                                        <span class="btns-item"><img class="btns-item-img" src="../assets/icon-hist.png" alt="">{{item.browse}}</span>
                                        <span class="btns-item" @click="like(index)"><img class="btns-item-img" src="../assets/icon-like.png" alt="">{{item.fabulous}}</span>
                                        <span class="btns-item"><img class="btns-item-img" src="../assets/icon-comment22.png" alt="">{{item.comment_num}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-show="loading && !loadEnd" class="loadmore-loading" style="display: none">
                            <mt-spinner type="fading-circle"
                                        style=" display: inline-block;vertical-align: middle;margin-right: 5px;"></mt-spinner>
                            加载中...
                        </div>
                        <div v-show="loadEnd" class="loadmore-loading" style="display: none">
                            <!--加载中...-->
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <TabBar ref="tabBar" :curr="tabBarCurr"></TabBar>
    </div>
</template>

<script type="text/ecmascript-6">
    import {Toast} from 'mint-ui';
    import headerTab from '../components/header-tab.vue'
    import TabBar from "../components/TabBar"
    import config from "../store/config"
    import wxShare from "../store/wxShare"
    export default {
        name: "guideline",
        components: {
            headerTab,
            TabBar
        },
        data() {
        return {
            url: config.url,
            flagSearchValue: true,
            keywords: '',
            keywordsTime:0,
            tabCurr: 1,
            tabConfig: {
                sub: {
                    arr: [], //{cn_name: '所有', id: 0},
                    activeIndex: 0
                }
            },
            tabBarCurr: 1, //底部导航
            shareView: false,//分享
            shareTop: 0,

            class_id: 1,
            // 分页参数
            listArr: [],
            totalPage: 0,
            pageSize: 10,
            page: 1,
            loadEnd: false,
            loading: false,// 为 true， bottom-method 就不会再次执行加载更多
            wrapperHeight: 0,
            tabId:0,
            tabCurr: 0,
            tabMenu: [{name: '美国',id:48}, {name: '加拿大',id:51}],
            city_id:48,
        }
    },
        methods: {
            tabFun(val,id) {     //tab切换
                var that=this;
                that.tabCurr = val;
                that.page=1;
                that.listArr = [];
                that.loadDataMore()
                that.city_id=id
            },
    //        selectSubType(subType) {
    //            this.class_id = subType;
    //            this.page = 1;
    //            this.listArr = [];
    //            this.keywords='';
    //            this.loadDataMore();
    //            //}
    //        },
            flagSearch() {  //隐藏input
                this.flagSearchValue = !this.flagSearchValue;
            },
            // 获取tab分类、tag
    //        getTab() {
    //            this.axios.post('wapclass')
    //                    .then(res => {
    //                var tabarr = res.data.map(item => {
    //                    return {cn_name: item.name, id: item.id};
    //                })
    //                //tabarr.unshift({cn_name: '所有', id: 0});
    //                this.tabConfig.sub.arr = tabarr;
    //            })
    //        .catch(err => console.log(err));
    //        },
            // 搜索
            searchKey(){
                var _that=this;
                if(new Date().getTime()-_that.keywordsTime>300){
                    _that.listArr=[];
                    _that.page=1;
                    _that.loadEnd=false;
                    _that.loading=true; // 为 true， bottom-method 就不会再次执行加载更多
                    _that.loadDataMore();
                    _that.keywordsTime=new Date().getTime();
                }
            },
            loadDataMore() {
                setTimeout(() => {
                    this.getList();
                }, 300);
            },
            getList() {
                let _that = this;
                let params = {
//                    class_id: _that.tabCurr,
                    search: _that.keywords,
                    pagelimit: _that.pageSize,
                    pagenum: _that.page,
                    city_id:_that.city_id,
                }
                _that.loading = true;
                _that.axios.postAll('waparticle', params)
                        .then(res => {
                    if (res) {
                        if (res.data.code == 0 && res.data.data) {
                            var serch=document.getElementById('serch')
                            serch.blur()
                            let listArr = _that.listArr;
                            let listArrtext = JSON.stringify(listArr);
                            var reg = /^(http|https):\/\//;
                            res.data.data.data.forEach(item => {
                                if (listArrtext.indexOf(JSON.stringify(item)) == -1) {
                                    if (!reg.test(item.img)) {
                                        item.img = _that.url + item.img
                                    }
                                    listArr.push(item);
                                }
                            })
                            _that.page += 1
                            _that.totalPage = res.data.data.totalpage
                            _that.listArr = listArr;

                            if (_that.page <= _that.totalPage) {
                                _that.loading = false;
                                _that.loadEnd = true;
                            }
                            if (res.data.data.data.length < _that.pageSize) {
                                _that.loadEnd = true;
                            }
                        } else {
                            Toast({
                                message: res.data.msg,
                                position: 'top',
                                duration: 1000
                            });
                            _that.loadEnd = true;
                        }
                        if (_that.$store.state.token) {//分享
                            _that.share({
                                desc: "旅行攻略",
                                link:undefined, // 分享链接
                                imgUrl:undefined, // 分享图标
                            });
                        }
                    }
                })
            .catch(err => {
                    console.log(err)
                });
            },
            // 点赞
            like(index) {
                if(!this.$store.state.token){
                    this.$router.push({path:"/my-login"})
                    return;
                }
                var item = this.listArr[index]
                var params = {
                    article_id: item.article_id
                }
                this.axios.post('wapfabulous',params)
                        .then(res => {
                    Toast({message: res.msg, duration: 1000});
                    if(res.msg=='点赞成功'){
                        this.listArr[index].fabulous+=1
                    }else{
                        this.listArr[index].fabulous-=1
                    }
                })
            .catch(err => console.log(err));
            },
            // 分享
            share(obj) {
                wxShare({
                    title: '快帮行', // 分享标题
                    desc: obj.desc, // 分享描述
                    link: obj.link, // 分享链接
                    imgUrl: obj.imgUrl, // 分享图标
                    debug: false
                }, () => {//分享成功后的回调函数
                    //Toast({message: '分享成功！', duration: 1500});
                    console.log('分享成功')
                    this.shareView = false;
                    this.share({
                        desc: this.tabConfig.sub.arr[0].cn_name, // 分享描述
                        link:undefined,
                        imgUrl:undefined,
                    })
                });
            }
        },
        mounted() {
    //        this.getTab()//获取分类
            this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top - this.$refs.tabBar.$el.offsetHeight;
            this.keywords=this.$route.query.keyword
        },
        created(){
            window.scrollTo(0,0);
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";

    .page {
        background: #FFFFFF;
        min-height: 100%;
    }
    .h30 {
        height: rpx(10);
        background: $bgcolor1;
    }
    .menuTab {
        position: relative;
        height: rpx(100);
        background: $color0;
        overflow: hidden;
    &-search {
         position: absolute;
         top: 0;
         right: 0;
         z-index: 9999;
         width: rpx(90);
         height: rpx(100);
         padding-top: rpx(30);
         padding-left: rpx(10);
         font-size: rpx(34);
         color: #696969;
     //box-shadow: 0 0 rpx(20) $color2;

    &-img {
         width: rpx(48);
         height: rpx(48);
         margin-left: rpx(20);
     }
    }
    }

    .search {
        display: flex;
        align-items: center;
        padding: rpx(30) rpx(15) rpx(20) rpx(15);
        background: $color0;
        border-top: 1px solid $color2;
        color:#999999;
    &-goback {
            width: rpx(50);
            height: rpx(64);
            padding-top: rpx(16);
        img{
            width: rpx(22);
            height: rpx(34);
        }
    }
    &-left {
         /*flex: 1;*/
            border-radius: rpx($radius12);
            width:rpx(530);
            background: #f2f2f2;
             &-icon {
                  display: flex;
                  width: 100%;
                  height: rpx(60);
                  line-height: rpx(60);
                  font-size: rpx(24);
                  padding-left: rpx(10);
                  background: #f2f2f2;
                  padding: 0 rpx(20);
                  border-radius: rpx($radius12);
                        i{

                        }
                    input {
                        box-sizing: border-box;
                        border-right: none;
                        background: #f2f2f2;
                        /*border-radius: rpx($radius12);*/
                        padding: 0 rpx(20);
                        width: 100%;
                        height: rpx(60);
                        line-height: 1;
                        font-size: rpx(24);

                    }
              }

    }
    &-right {
         font-size: rpx(20);
         margin-left:rpx(40);
            &-icon{
                 /*width: rpx(38);*/
                 /*display: flex;*/
                 height: rpx(60);
                 line-height: rpx(60);
                 font-size: rpx(24);
                 padding-left: rpx(8);
                    &-img{
                        padding:0 rpx(13) 0 0;
                        img   {
                            width: rpx(37);
                            height: rpx(48);
                        }
                    }

                    &-span {
                        display: inline-block;
                        font-size: rpx(28);
                        color: #999999;
                        line-height: rpx(80);
                        height: rpx(60);
                        margin-right: rpx(10);
                        float:right;
                        span{
                            font-size: rpx(28);
                            line-height: rpx(60);
                            height: rpx(60);
                            padding-right: rpx(5);
                        }
                        &-cut {
                             width: rpx(20);
                             height: rpx(13);
                             /*margin-left: rpx(20);*/
                         }
                    }
             }

    &-btn {
         margin-top: rpx(23);
         width: rpx(44);
         height: rpx(44);
     }
    }
    }

    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }

    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
    {
        opacity: 0;
    }

    .list {
        position: relative;
    &-item {
         position: relative;
         padding: rpx(40) rpx(0) rpx(0) rpx(20);
         background: $color0;
         display:flex;
         width: rpx(750);
         height: rpx(250);
         border-bottom: rpx(10) solid $bgcolor1;
            &-right{
                 width: rpx(305);
                 height: rpx(250);
            }
            &-left{
                 width: 100%;
                 height: rpx(250);
            }

    &-img {
         width: rpx(260);
         height: rpx(210);
         z-index: 8;
     }
    &-play-btn {
         position: absolute;
         left: 50%;
         top: rpx(152);
         margin-left: rpx(-48);
         width: rpx(96);
         height: rpx(96);
         z-index: 9;
     }
    &-title {
         padding: rpx(0) rpx(30);
         font-size: rpx(32);
         line-height: 130%;
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
         -webkit-line-clamp: 3;
         -webkit-box-orient: vertical;
     }
    &-date {
         padding: rpx(15) rpx(30);
         font-size: rpx(28);
         color: $color5;
     }
    &-share {
         position: absolute;
         right: rpx(30);
         bottom: rpx(30);
         width: rpx(48);
         height: rpx(48);
     }
    }
    .btns {
        padding: rpx(20);
            &-right{
                 position: absolute;
                 right: rpx(20);
                 bottom: rpx(10);
             }
    &-item {
         margin-right: rpx(30);
         font-size: rpx(28);
         color: $color5;
    &-img {
         margin-right: rpx(10);
         width: rpx(32);
         height: rpx(32);
     }
    }

    }
    }

    .loadmore-wrapper {
        margin-top: -1px;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
        // overflow-x: hidden;
        /*-webkit-overflow-scrolling: touch;*/
    }

    .loadmore-loading {
        text-align: center;
        height: rpx(120);
        line-height: rpx(120);
        color: $color5;
    }

    .loadmore-loading div {
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
    }

    //分享
      .share-div {
          position: absolute;
          background: rgba(0, 0, 0, .5);
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          z-index: 99999;
          width: 100%;
          height: 100%;
          text-align: center;
    &-img {
         margin-top: rpx(30);
         width: rpx(500);
         height: rpx(220);
     }
    }

    /*城市select样式*/
    .tab {
            &-menu {
                display: flex;
            }
            &-menu-item {
                flex: 1;
                padding: rpx(10) rpx(20);
                text-align: center;
                color:#333333;
                font-size: rpx(32);
                border-bottom: solid #cccccc rpx(4);
                    &.active {
                         /*color: $color3;*/
                         border-bottom: solid #ff7d00 rpx(4);
                     }
            }

    }
    .loadmore-loading{
        display: none;
    }
    input[type=search]::-webkit-search-cancel-button{
        -webkit-appearance: none;
    }
</style>